/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("mask") {
    #{generate-class-name($titon-mask, "target")} {
        overflow: hidden;
        position: relative;

        // Fixes issues where mask does not display in iOS
        // Kind of hacky? Other solutions?
        -webkit-backface-visibility: hidden;
    }

    #{generate-class-name($titon-mask, "overlay")} {
        @extend %placeholder-full-screen;
        position: absolute;
        z-index: map-get($titon-settings-zindex, "mask");
        opacity: 0;
        visibility: hidden;
        background: black(map-get($titon-mask, "opacity"));
        transition: all map-get($titon-mask, "transition");
        color: #fff;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: theme-setting("large-padding");

        &.is-expanded {
            @extend %placeholder-show;
        }

        &.is-collapsible {
            cursor: pointer;
        }
    }
}
